<template>
  <view
    class="float-bottom"
    :class="[customClass, { 'safe-area': safeAreaInsetBottom, 'fit-tab-bar': fitTabBar }]"
  >
    <slot></slot>
  </view>
</template>
<script setup>
const props = defineProps({
  customClass: {
    type: String,
    default: 'h-[116rpx]',
  },
  fitTabBar: {
    type: Boolean,
    default: false,
  },
  safeAreaInsetBottom: {
    type: Boolean,
    default: true,
  },
})
</script>
<script lang="ts">
export default {
  options: {
    virtualHost: true,
    name: 'KFloatBottom',
  },
}
</script>
<style lang="scss" scoped>
.float-bottom {
  @apply fixed bottom-0 left-0 w-full bg-white z-10;

  // #ifdef H5
  &.fit-tab-bar {
    bottom: 50px;
  }

  // #endif
}
</style>
